<!-- 房屋抽样详查建筑结构类型统计 -->
<template>
    <div class="statistics statisticsBox">
        <template v-for="(item, index) in circleConfig" :key="index">
            <circle-svg :name="item.type" :color="item.color" :process="item.proportion" />
        </template>
    </div>
</template>
<script setup>
import CircleSvg from './CircleSvg.vue';
import { getStatistics } from '@/api/housingFacilities.js';
const circleConfig = ref([]);

let colorArr = ['#FF518A', '#46FFFF', '#FF31BA', '#FFFA64', '#25FFAF', '#E32EFF', '#FF7B4B', '#41CBFF', '#C0FF36', '#FFB35B']
getStatistics().then((res) => {
    res.data.map((item, index) => {
        item.color = colorArr[index]
    })
    circleConfig.value = res.data;
});

// var circleSvgTimer = null;
// let i = 0;
// circleSvgTimer = setInterval(function () {
//     $(".statisticsBox .circle-box").fadeOut();
//     setTimeout(function () {
//         $(".statisticsBox .circle-box").fadeIn("slow");
//         i++;
//         if (i <= circleConfig.value.length) {
//             i = 0;
//             var last = circleConfig.value.pop();//取数组最后一项
//             circleConfig.value.unshift(last);//插入数组第一位
//         }
//     }, 500)
// }, 8000);

</script>
<style scoped lang="scss">
@keyframes animX {
    0% {
        left: 10px;
    }

    100% {
        left: 380px;
    }
}

@keyframes animY {
    0% {
        top: 0px;
    }

    100% {
        top: 250px;
    }
}

.statistics {
    position: relative;
    height: 350px;
    background: url('@/assets/images/housing/pc.png');
    background-repeat: no-repeat;
    background-position: 62px 90px;

    .circle-box {
        position: absolute;
        width: 60px;

        &:nth-child(1) {
            // top: 85px;
            // left: 38px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }

        &:nth-child(2) {
            // left: 115px;
            // top: 40px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;

        }

        &:nth-child(3) {
            // top: 10px;
            // left: 196px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
        }

        &:nth-child(4) {
            // right: 115px;
            // top: 40px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
        }

        &:nth-child(5) {
            // right: 36px;
            // top: 85px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
        }

        &:nth-child(6) {
            // right: 36px;
            // bottom: 85px;
            animation:
                animX 10s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
        }

        &:nth-child(7) {
            // right: 115px;
            // bottom: 40px;
            animation:
                animX 10s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
        }

        &:nth-child(8) {
            // bottom: 20px;
            // left: 196px;
            animation:
                animX 10s cubic-bezier(0.36, 0, 0.64, 1) -19s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
        }

        &:nth-child(9) {
            // left: 115px;
            // bottom: 40px;
            animation:
                animX 10s cubic-bezier(0.36, 0, 0.64, 1) -21s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
        }

        &:nth-child(10) {
            // left: 38px;
            // bottom: 85px;
            animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -23s infinite alternate,
                animY 10s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate;
        }
    }

    &:hover .circle-box {
        animation-play-state: paused;
    }
}
</style>